<template>
  <div id="DeviceEchart" v-loading="loading" element-loading-background="#031231" element-loading-text="数据获取中...">
    <div :id="id" :ref="id" :class="className" :style="{ height: height, width: width }"></div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, onBeforeUnmount, nextTick, watch, defineExpose } from 'vue'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  LegendComponent,
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  LegendComponent,
])

// 父组件传的参数
const props = defineProps({
  // 类名
  className: {
    type: String,
    default: 'chart',
  },
  id: {
    type: String,
    default: 'chart',
  },
  // 宽度
  width: {
    type: String,
    default: '100%',
  },
  // 高
  height: {
    type: String,
    default: '100%',
  },
  // 内容
  options: {
    type: Object,
    default: () => ({}),
  },
  // 图例
  legendData: {
    type: Array,
    default: [],
  },
  // 点击按钮
  activeBtnArr: {
    type: Array,
    default: [],
  },
  // 实时刷新更新Series
  setData: {
    type: Array,
    default: [],
  },
})
watch(
  () => props.options,
  e => {
    if (e) {
      myOptions = e
      nextTick(() => {
        setInt()
      })
    }
  },
  () => props.setData,
  e => {
    if (e) {
      console.log(e, '更新setData')
      myChart.setOption({
        series: e,
        xAxis: {
          data: e[0].data.map(e => {
            return e.name
          }),
        },
      })
    }
  },
  {
    immediate: true, // 这个属性是重点啦
    deep: true, // 深度监听的参数
  },
)

let loading = ref(false)
let times = null
// echarts 实例在 Vue3 中不能是一个响应式对象，否则提示框会显示不出来
let myChart = ''
let myOptions = {}

function init() {
  // 初始化
  myChart = echarts.init(document.getElementById(props.id))
  // 设置图表
  myChart.setOption(myOptions)
  // loading = false;
  // 点击事件
  window.addEventListener('resize', changeSize)
  // 截取事件
  datazoom()
}

function datazoom() {
  myChart.on('datazoom', params => {
    let xDataArr = props.options.xAxis.data
    let dataZoomStartIndex1 = myChart.getModel().option.dataZoom[0].startValue
    let dataZoomEndIndex1 = myChart.getModel().option.dataZoom[0].endValue
    // 如果有2条
    // let dataZoomStartIndex2 = myChart.getModel().option.dataZoom[1].startValue
    // let dataZoomEndIndex2 = myChart.getModel().option.dataZoom[1].endValue
    //缩放后，两条x轴的起始点
    console.log(xDataArr[dataZoomStartIndex1])
    console.log(xDataArr[dataZoomEndIndex1])
    // myChart.dispatchAction({
    //   type: 'dataZoom',
    //   // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
    //   // 开始位置的百分比，0 - 100
    //   start: 0,
    //   // 结束位置的百分比，0 - 100
    //   end: 100,
    // })
  })
}
function changeSize() {
  myChart.resize()
}
// 设置数据
function setInt() {
  if (myOptions.series.length) {
    console.log(myOptions, '设置数据myOptions')
    myChart.setOption(myOptions)
  }
}
// 打开截取
function openIntercept(e) {
  myChart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'dataZoomSelect',
    // 启动或关闭
    dataZoomSelectActive: e,
  })
}
// 截取还原
function reduction() {
  myChart.dispatchAction({
    type: 'dataZoom',
    // 开始位置的百分比，0 - 100
    start: 0,
    // 结束位置的百分比，0 - 100
    end: 100,
  })
}
function liveOption(e) {
  console.log('更新liveOption')
  myChart.setOption({
    series: e,
    xAxis: {
      data: e[0].data.map(e => {
        return e.name
      }),
    },
  })
}
// 子类暴露属性，方便父类调用
defineExpose({
  loading,
  liveOption,
  openIntercept,
  reduction,
})
onMounted(() => {
  nextTick(() => {
    init()
  })
})
onBeforeUnmount(() => {
  myChart.clear()
  myChart.dispose()
  myChart = null
  window.removeEventListener('resize', changeSize)
})
</script>
<style lang="scss" scoped>
#DeviceEchart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  
  .top {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    .tab {
      display: flex;
    }
  }
}
</style>